<template>
    <div class="activity-index">
    	<el-form :inline="true" >
          <el-form-item label="昵称">
            <el-input  placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input  placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input  placeholder="请输入手机"></el-input>
          </el-form-item>

          <el-form-item label="用户类型">
            <el-select  placeholder="请输选择用户类型">
              <el-option label="管理员" value="shanghai"></el-option>
              <el-option label="普通用户" value="beijing"></el-option>
              <el-option label="志愿者" value="beijing"></el-option>
              <el-option label="拉黑用户" value="beijing"></el-option>
            </el-select>
          </el-form-item>    
        </el-form>
        <div class="query">
              <el-button type="primary" @click="onSubmit">查询</el-button>
        </div>
        <el-table :data="tableData5" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="活动 ID">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="浏览数">
                            <span>{{ props.row.browseNum }}</span>
                        </el-form-item>
                        <el-form-item label="收藏数">
                            <span>{{ props.row.collectionNum }}</span>
                        </el-form-item>
                        <el-form-item label="单人购买票数">
                            <span>{{ props.row.maxBuy }}</span>
                        </el-form-item>
                        <el-form-item label="推荐值">
                            <span>{{ props.row.oderby }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <span>{{ props.row.createDate }}</span>
                        </el-form-item>
                        <el-form-item label="活动地址">
                            <span>{{ props.row.addrDesc }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="#" 
                             type="index"
                            :index="1">
            </el-table-column>
            <el-table-column label="活动名" prop="name" widht="180">
            </el-table-column>
            <el-table-column label="活动人数" prop="maxNum">
            </el-table-column>
            <el-table-column label="报名人数" prop="activityNum">
            </el-table-column>
            <el-table-column label="是否公开" prop="isopen">
            </el-table-column>
            <el-table-column label="活动类型" prop="type">
            </el-table-column>
            <el-table-column label="操作" prop="desc" width="150">
                <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="handleDelete(scope.$index, scope.row)">查看</el-button>
                    <el-button
                      size="mini"
                      type="success"
                      @click="handleDelete(scope.$index, scope.row)">完结</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="15"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
        </div>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'HelloWorld',
    props: {

    },
    data() {
        return {
            tableData5: [{
                id: '12987122',
                name: '湖南软件学院一日游',
                maxNum: '9999999',
                activityNum: '100',
                collectionNum: 22,
                browseNum: 123,
                maxBuy:1,
                oderby:10,
                addrDesc:'湖南省 长沙市 开福区 马栏山 西湖楼广场旁右转100米的小巷子',
                isopen: '公开',
                type: '线上',
                createDate: '2018-9-8 14:35:28'
            }]
        }
    },
    methods: {

    }
}
</script>
<style scoped lang="styl">
.activity-index >>> .demo-table-expand {
    font-size: 0;
}

.activity-index >>> .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
}

.activity-index >>> .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.query
    display flex
    justify-content flex-end
    margin 0 58px 20px 0 
.pages
    display flex
    justify-content flex-end
    margin-top 20px
</style>